<template>
    <view class='box'>
        <bc-title title="测试拨打号码"></bc-title>
		<view class="content">
			<view class="" @click="handleCall(13588888888)">
				我要打电话
			</view>
		</view>
		<!-- 3.使用插件 -->
		<xyPermission :show="showTip" title="拨打电话权限申请说明" content="我们将获取系统拨打电话功能,用于与客户电话沟通交流"></xyPermission>
    </view>
</template>

<script setup>
	// 1.引入插件
	import xyPermission from '@/uni_modules/xy-permission/components/xy-permission/xy-permission.vue'
	// 2.引入权限判断方法
	import { requestAndroidPermission, gotoAppPermissionSetting } from '@/uni_modules/xy-permission/permission.js'
	
	const showTip = ref(false)
	
	const handleCall = ((e) =>{
		if(!e){
			uni.$u.toast('找不到该客户号码');
			return
		}
		// 4.判断是否为安卓移动端，只有安卓才需要，ios自带同步告知权限申请的使用目的
		//#ifdef APP-PLUS
		const systemInfo = uni.getSystemInfoSync();
		if(systemInfo.platform === 'android'){
			showTip.value = true
			requestAndroidPermission('phone').then(res =>{
				if(res.data === 1){ //已有权限
				    // 5.这里写你自己的逻辑代码
					uni.makePhoneCall({
						phoneNumber: e
					})
				}
			}).catch(err =>{
				uni.$u.toast(err.data);
			}).finally(() =>{
				showTip.value = false
			})
		}else{
			uni.makePhoneCall({
				phoneNumber: e
			})
		}
		//#endif
		
		// 6.H5不需要权限说明，方便H5网页调试
		//#ifdef H5
		uni.makePhoneCall({
			phoneNumber: e
		})
		//#endif
	})
</script>

<style>
	page{
		background-color: #f3f4f6;
	}
</style>
<style lang='scss' scoped>
    .box{
		.content{
			padding: 20rpx;
		}
	}
</style>